<script setup>
import { RouterLink, RouterView } from "vue-router";
import { ref, onMounted, computed } from "vue";
import { isLoggedIn, logout } from "./services/auth";
import { useRouter } from "vue-router";
import { useUserStore } from "./stores/user";

const router = useRouter();
const userStore = useUserStore();
const showDropdown = ref(false);

// 使用计算属性从store获取用户信息
const userInfo = computed(() => userStore.userInfo);

onMounted(() => {
  if (isLoggedIn()) {
    userStore.loadUserInfo();
  }
});

const handleLogout = () => {
  logout();
  userStore.updateUserInfo(null);
  router.push("/login");
};
</script>

<template>
  <div class="flex flex-col min-h-screen bg-gray-100">
    <header class="bg-white shadow flex items-center">
      <div class="container mx-auto px-4 py-2 flex justify-between items-center">
        <div class="flex items-center">
          <RouterLink to="/" class="text-2xl font-bold flex items-center bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-indigo-600">AI播客学习平台</RouterLink>
        </div>
        <nav class="flex space-x-6 items-center mt-0 ">
          <!-- <RouterLink to="/" class="text-gray-700 hover:text-blue-600">课程列表</RouterLink>
          <RouterLink to="/about" class="text-gray-700 hover:text-blue-600">关于我们</RouterLink> -->
          
          <!-- 未登录状态显示登录按钮 -->
          <RouterLink v-if="!userInfo" to="/login" class="text-gray-700 hover:text-blue-600">登录</RouterLink>
          
          <!-- 已登录状态显示用户头像和名称 -->
          <div v-else class="relative">
            <button 
              @click="showDropdown = !showDropdown" 
              class="flex items-center space-x-2 text-gray-700 hover:text-blue-600 focus:outline-none"
            >
              <img 
                class="h-8 w-8 rounded-full object-cover" 
                :src="userInfo.avatar_url || 'https://picsum.photos/id/1005/200/200'" 
                alt="用户头像"
              >
              <span>{{ userInfo.userName || '用户' }}</span>
              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
            
            <!-- 下拉菜单 -->
            <div 
              v-if="showDropdown" 
              class="absolute right-0 w-48 bg-white rounded-md shadow-lg py-1 z-10"
              v-click-outside="() => showDropdown = false"
            >
              <RouterLink 
                v-if="userInfo && userInfo.role >= 2" 
                to="/admin" 
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
              >
                管理后台
              </RouterLink>
              <button 
                @click="handleLogout" 
                class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
              >
                退出登录
              </button>
            </div>
          </div>
        </nav>
      </div>
    </header>

    <main class="container mx-auto px-4 py-8 flex-grow">
      <RouterView />
    </main>

    <footer class="bg-gray-600 text-white py-6 mt-auto">
      <div class="container mx-auto px-4 text-center">
        <p>© 2024 AI播客学习平台 - 提供高质量在线课程</p>
      </div>
    </footer>
  </div>
</template>

<style>
@import "./assets/main.css";

header .wrapper {
  display: flex;
  place-items: flex-start;
  flex-wrap: wrap;
}

nav {
  text-align: left;
  margin-left: -1rem;
  font-size: 1rem;

  padding: 1rem 0;
  margin-top: 1rem;
}
</style>
